<template>
    <div class="page-balance">
        <van-nav-bar
                :fixed="fixed"
                title="余额记录"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <div v-if="list==''" class="user-list">
            您当前还没有任何记录~~~~~~
        </div>
        <div v-if="list!=''" id="list-content">
            <van-cell-group :style="{marginTop:'46px'}">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        @load="onLoad"
                        :offset="10"
                >
                    <van-cell :title=item.description :value=item.amount :label=formatTime(item.create_time) v-for="item in list"/>
                </van-list>
            </van-cell-group>
        </div>
        <div v-show="usershow" class="loading-no-more">
            我也是有底线的~~~~~~
        </div>
    </div>
</template>

<script>
    import date from "../api/date";
    import {Logs} from "../api/data";
    import { List } from 'vant';
    import Vue from 'vue'
    Vue.use(List);
    export default {
        data() {
            return {
                fixed:true,
                page: 1,
                loading: false,
                finished: false,
                list: [null],
                usershow:false,
                userlis:'',
            }
        },
        methods: {
            onLoad() {
                // 异步更新数据
                setTimeout(() => {
                    this.page++
                    Logs(this.page).then(res => {//余额记录
                        this.userlis = res.data.data.list//请求结果赋值
                        console.log(this.userlis.length)
                        for (let i = 0; i < res.data.data.list.length; i++) {
                            this.list.push(res.data.data.list[i]);
                        }

                        // 加载状态结束
                        this.loading = false;
                        // 数据全部加载完成
                        if (this.userlis.length>-1 && this.userlis.length<1) {//判断结果
                             this.usershow=true;
                            this.finished = true;
                        }
                    })
                }, 2000);
                this.loading = true;
            },
            onClickLeft() {
                this.$router.back()
            },
            formatTime(time) {
                let createDate = new Date();
                createDate.setTime(time * 1000);
                return createDate.format('yyyy-MM-dd hh:mm');
            },
        },
        computed: {//计算属性
            token: function () {
                return ""
            }
        },
        mounted() {//页面加载执行函数
            Logs(this.page).then(res => {//余额记录
                if (res.data.code == '10001') {
                    Toast('登录已失效，请重新登录！')
                    this.$router.push({path:`/login`})
                    return
                }
                this.list = res.data.data.list
            })
        }
    };
</script>
<style>
    .page-balance .van-cell__value {
        padding-top: 10px;
    }
</style>
<style scoped>
    .card-goods {
        margin-top: 46px;
        padding: 10px 0;
        background-color: #fff;
    }

    .user-list {
        margin-top: 47px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        font-size: 14px;
    }
</style>
